<template>
	<view class="container">
		<view class="nav" :style="'padding-top:'+barHeight+'px'">
			<!-- <image class="back" @click="back()" src="../../../static/index/back.png" mode=""></image> -->
			<view class="nav_name">
				积分充值
			</view>
		</view>

		<view class="inputs">
			<input class="input" placeholder="输入需要充值的积分点数" v-model="price" type="number">
		</view>

		<view class="hint">
			注：1元等于1积分
		</view>

		<view class="pay">
			<!-- #ifdef APP-PLUS || MP-WEIXIN -->
			<view class="pay_type" @click="check(1)">
				<view class="pay_left">
					<image class="pay_img" src="https://www.stck.cc/my/wei.png" mode=""></image>
					<view class="pay_name">
						微信
					</view>
				</view>
				<image v-if="paytype == 1" class="select" src="https://www.stck.cc/my/selecta.png" mode=""></image>
				<image v-else class="select" src="https://www.stck.cc/my/noselect.png" mode=""></image>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="pay_type" @click="check(0)">
				<view class="pay_left">
					<image class="pay_img" src="https://www.stck.cc/my/pay.png" mode=""></image>
					<view class="pay_name">
						支付宝
					</view>
				</view>
				<image v-if="paytype == 0" class="select" src="https://www.stck.cc/my/selecta.png" mode=""></image>
				<image v-else class="select" src="https://www.stck.cc/my/noselect.png" mode=""></image>
			</view>
			<!-- #endif -->

			<!-- #ifdef MP-TOUTIAO -->
			<view class="pay_type" @click="check(3)">
				<view class="pay_left">
					<image class="pay_imga" src="https://www.stck.cc/my/dou.png" mode=""></image>
					<view class="pay_name">
						抖音支付
					</view>
				</view>
				<image v-if="paytype == 3" class="select" src="https://www.stck.cc/my/selecta.png" mode=""></image>
				<image v-else class="select" src="https://www.stck.cc/my/noselect.png" mode=""></image>
			</view>
			<!-- #endif -->
		</view>


		<view class="btn" @click="put">
			充 值
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				barHeight: 0,
				price: '',
				paytype: 1
			}
		},
		onLoad() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight;
		},
		methods: {
			check(index) {
				this.paytype = index
			},
			puta() {
				console.log(888)
				if (!this.price) return this.toast('请输入充值金额')

				uni.$u.http.post('/rechargecredit', {
					type: 'recharge',
					num: this.price,
					paytype: 3
				}).then(res => {
					if (res.code == 1) {
						console.log(res.data.pay.data.order_id)

						uni.requestPayment({
							orderInfo: {
								order_id: res.data.pay.data.order_id,
								order_token: res.data.pay.data.order_token
							},
							service: 5,
							getOrderStatus: e => {
								console.log(e)
							},
							success: response => {
								if (response.code == 0) {
									console.log('支付成功')
								}
							},
							fail: (e) => {
								console.log(e)
								this.toast('充值失败');
							}
						})
					}
				}).catch((res) => {

				})
			},
			put() {
				if (!this.price) return this.toast('请输入充值金额')

				uni.$u.http.post('/rechargecredit', {
					type: 'recharge',
					num: this.price,
					// #ifdef APP-PLUS
					paytype: this.paytype,
					// #endif
					// #ifdef MP-WEIXIN
					paytype: 2,
					// #endif
					// #ifdef MP-TOUTIAO
					paytype: 3
					// #endif
				}).then(res => {
					console.log('???',res)
					if (res.code == 1) {
						// if(this.paytype == 1) {
						// 	console.log(JSON.parse(res.data.pay),'￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥')
						// 	const pay = JSON.parse(res.data.pay)
						// }
						// console.log(this.paytype)
						// #ifdef MP-WEIXIN
						console.log(res.data.pay.appId,'。。。。')
						uni.requestPayment({
							appId: res.data.pay.appId,
							nonceStr: res.data.pay.nonceStr,
							package: res.data.pay.package,
							paySign: res.data.pay.paySign,
							signType: res.data.pay.signType,
							timeStamp: res.data.pay.timeStamp,
							success: (e) => {
								this.toast('充值成功');
								setTimeout(() => {
									uni.$u.route({
										type: 'back'
									})
								}, 1000)
							},
							fail: (e) => {
								console.log(e)
								this.toast('充值失败');
							}
						})
						// #endif

						// #ifdef MP-TOUTIAO
						console.log(333)
						uni.requestPayment({
							orderInfo: {
								order_id: res.data.pay.data.order_id,
								order_token: res.data.pay.data.order_token
							},
							service: 5,
							getOrderStatus: e => {
								console.log(e)
							},
							success: response => {
								if (response.code == 0) {
									console.log('支付成功')
								}
							},
							fail: (e) => {
								console.log(e)
								this.toast('充值失败');
							}
						})
						// #endif
						// #ifdef APP-PLUS
						console.log(res.data.pay, '888')
						// console.log(JSON.parse(res.data.pay))
						console.log('?????')
						uni.requestPayment({
							provider: this.paytype == 1 ? 'wxpay' : 'alipay',
							orderInfo:res.data.pay, //微信、支付宝订单数据
							success: function(res) {
								// console.log('success:' + JSON.stringify(res));
								// alert(JSON.stringify(res));
								this.toast('充值成功');
								setTimeout(() => {
									uni.$u.route({
										type: 'back'
									})
								}, 1000)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								this.toast('充值失败');
								// alert(JSON.stringify(err));
							}
						});
						// #endif
					}
				}).catch((res) => {
					console.log(res,'?????')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;

		.nav {
			margin: 0 30rpx;
			padding-bottom: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.back {
				width: 40rpx;
				height: 40rpx;
			}

			.nav_name {
				flex: 1;
				margin-right: 30rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 40rpx;
			}
		}


		.inputs {
			display: flex;
			align-items: center;
			margin: 40rpx 30rpx 20rpx 30rpx;
			width: 686rpx;
			height: 107rpx;
			background: #F9FAFB;
			border-radius: 12rpx;

			.input {
				margin-left: 20rpx;
			}
		}

		.hint {
			margin: 0 30rpx;
			font-size: 24rpx;
			color: rgba(234, 0, 0, 0.5);
			line-height: 40rpx;
		}

		.pay {
			margin: 60rpx 30rpx 30rpx 30rpx;
			width: 690rpx;
			background: #F9FAFB;
			border-radius: 20rpx;

			.pay_type {
				margin: 0 30rpx;
				padding: 30rpx 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.pay_left {
					display: flex;
					flex-direction: row;
					align-items: center;


					.pay_img {
						margin-right: 20rpx;
						width: 55rpx;
						height: 55rpx;
					}

					.pay_imga {
						margin-right: 20rpx;
						width: 43rpx;
						height: 53rpx;
					}

					.pay_name {
						font-size: 28rpx;
						color: #323232;
						line-height: 34rpx;
					}
				}

				.select {
					width: 38rpx;
					height: 38rpx;
				}
			}
		}

		.btn {
			margin: auto;
			margin-top: 700rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 686rpx;
			height: 96rpx;
			background: #FEBF4E;
			border-radius: 48rpx;
			font-size: 32rpx;
			font-weight: normal;
			color: #FEFFFE;
			line-height: 40rpx;
		}

	}
</style>
